<template>
  <div class="media_detail">
    <div v-if="$store.state.device !== 'APP'" class="nav_top_list">
      <img  class="logo_left" src="../../../assets/img/modules/media/icon_13.png" alt="">
      <div v-if="!($store.state.device === 'APP' || $store.state.gsign === 'qxym')" class="btn_right">
        <a :href="'/media-find?device='+$store.state.device+'&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_22.png" alt=""></a>
        <a :href="'/elective-choose?school_id=407&center_id=8038&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_28.png" alt=""></a>
        <a :href="'/user-member?device='+$store.state.device+'&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_24.png" alt=""></a>
      </div>
    </div>
    <div v-if="articleList.post" :class="$store.state.device !== 'APP'?'text_body_no' : 'text_body_no app_nav'">
      <h4>{{articleList.post.postTitle}}</h4>
      <!--      <p>-->
      <!--        <span>作者：{{articleList.user_nickName}}</span>-->
      <!--        <span>时间：{{articleList.expireData}}</span>-->
      <!--      </p>-->
      <div class="item_v2_index_news" style="margin: 0 -0.32rem">
        <div class="top_img">
          <div class="left_img_text" @click="$router.push({ path:'/media-personal', query:{ id: articleList.userId }})">
            <img v-if="articleList.isV !== 1" class="v_img" src="../../../assets/img/modules/media/icon_v2_2.png" alt="">
            <img :src="articleList.avatar" alt="">
            <div class="name_text">
              <p>{{articleList.user_nickName}}</p>
              <span v-if="articleList.isV !== 1">优质行业计划签约者</span>
            </div>
          </div>
          <button  @click="model_show = true">关注</button>
        </div>
      </div>
      <div :class="compileShow ? 'Compile_body_format compile_active':'Compile_body_format'" v-html="articleList.post.postContent" @click="openImg($event)">
        {{articleList.post.postContent}}
      </div>
      <div v-if="!compileShow" class="body_format_btn" @click="compileShow = true">
        <p>点击查看全部</p>
        <van-icon name="arrow-down" />
      </div>
    </div>
    <div class="subscribe_img_bnt" @click="model_show = true">
      <img src="../../../assets/img/modules/media/icon_v2_5.png" alt="">
    </div>
    <div class="footer_body_no">
      <div  v-if="topArticleList.length > 0"  class="title_text">相关文章推荐</div>
      <div class="top_article_list">
        <div v-for="(item, index) in topArticleList" :key="index">
          <!-- 不是大V 没有图片 -->
          <div v-if="item.imageCount === 0 && item.videoCount === 0"  class="item_v2_index_news item_v2_index_news_active">
            <div class="text_body" @click="openModel(item.post.id)">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
              </div>
            </div>
            <div class="footer_body">
              <div class="right_body_no_v">
                <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
              </div>
            </div>
          </div>
          <!-- 不是大V 一张图片 -->
          <div v-if="item.imageCount === 1"   class="item_v2_index_news item_v2_index_news_active">
            <div class="text_body" @click="openModel(item.post.id)">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
              </div>
              <img :src="item.images[0]" alt="">
            </div>
            <div class="footer_body">
              <div class="right_body_no_v">
                <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
              </div>
            </div>
          </div>
          <!-- 不是大V 多张图片 -->
          <div v-if="item.imageCount > 1"  class="item_v2_index_news item_v2_index_news_active">
            <div class="text_body" @click="openModel(item.post.id)">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
                <div class="img_list">
                  <img :src="item.images[0] ? item.images[0] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                  <img :src="item.images[1] ? item.images[1] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                  <img :src="item.images[2] ? item.images[2] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                </div>
              </div>
            </div>
            <div class="footer_body">
              <div class="right_body_no_v">
                <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
              </div>
            </div>
          </div>
          <!-- 不是大V 视屏 -->
          <div v-if="item.imageCount === 0 && item.videoCount !== 0"  class="item_v2_index_news item_v2_index_news_active">
            <div class="text_body" @click="$router.push({ path:'/media-detail-no', query:{ id: item.post.id }})">
              <div class="right_text">
                <p>{{item.post.postTitle}}</p>
                <img class="video_img" src="../../../assets/img/modules/media/icon_v2_1.png" alt="">
              </div>
            </div>
            <div class="footer_body">
              <div class="right_body_no_v">
                <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="title_text">{{commentList.length > 0? '精彩评论' : '暂无评论'}}</div>
      <!--<div v-if="commentList.length === 0" class="no_data_title">
        <img src="../../../assets/img/modules/media/icon_v2_4.png" alt="">
        <p>暂无评论，抢占沙发~</p>
      </div>-->
      <van-list
          v-model="loading"
          :finished="finished"
          @load="onLoad">
        <div class="item_news" v-for="(item, index) in commentList" :key="item.userId + '' + index">
          <div class="top_img">
            <img :src="item.avatarurl?item.avatarurl:'http://css.gzedu.com/qy_oucnet_com/wx_img/1_ico_26.png'" alt="">{{item.fansName}}
          </div>
          <div class="comment_body">
            {{item.comment}}
          </div>
          <div v-if="item.listParent" class="answer_body">
            <h5>作者</h5>
            <p v-for="(pItem, index) in item.listParen" :key="pItem + '' +index">{{pItem}}</p>
          </div>
        </div>
        <div v-if="footerShow" class="no_data_title">
          <p>没有更多</p>
        </div>
      </van-list>
    </div>
    <div class="footer_bottom_body">
      <input type="text" v-model="commemtData.content" placeholder="说点什么~" @keydown.13="setComment" @keydown.229="() => {}">
      <div class="right_body">
        <div :class="articleList.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(articleList.post.id, articleList)"><i class="iconfont icon-dianzan1"></i>{{articleList.extidCount ? articleList.extidCount : 0}}</div>
        <div class="item_span"><i class="iconfont icon-pinglun"></i>{{commentList.length}}</div>
      </div>
    </div>
    <!--分享弹窗-->
    <div v-if="addressShow" class="share_btn_img" @click="addressShow = false">
      <img src="../../../assets/img/modules/media/icon_xq_16.png" alt="">
    </div>
    <!--遮罩层-->
    <drag-loding v-if="showLoding"></drag-loding>
    <!--分享有礼-->
    <a href="javascript:;" @click="openShareModel"  class="share_model_btn"><img src="../../../assets/img/modules/media/icon_v2_7.png" alt=""></a>
    <!--二维码弹层-->
    <div v-if="model_show" class="model_body">
      <div class="img_bg">
        <p>关注我们公众号</p>
        <p>获取更多优质订阅内容</p>
        <div class="ewm_img">
          <img :src="ewmImg" alt="">
        </div>
        <span>长按识别二维码</span>
        <span>随时随地体验行业新动向</span>
        <img class="out_model" src="../../../assets/img/modules/score/icon_19.png" alt="" @click="model_show = false">
      </div>
    </div>
  </div>
</template>
<script>
import debounce from 'lodash/debounce'
import dragLoding from '@/components/loding'
import wxapi from '@/utils/wxapi.js'
import mediaMixins from '@/utils/modules/media'
import { ImagePreview } from 'vant'
export default {
  mixins: [mediaMixins],
  name: 'media_detail',
  components: {
    dragLoding
  },
  data () {
    return {
      loading: false, // 上拉加载
      finished: false, // 上拉加载
      value: '',
      shareUrl: '',
      addressShow: false,
      footerShow: false,
      model_show: false,
      compileShow: false,
      showLoding: true, // loading效果
      articleId: 0,
      articleList: {},
      ewmImg: '',
      topArticleList: [],
      commentList: [],
      isComment: false,
      commemtData: {
        postId: 0, // 文章ID
        content: '' // 评论内容
      },
      current: 1, // 当前页
      size: 5 // 每页条数
    }
  },
  props: {},
  watch: {
  },
  methods: {
    /*
     *@author wf_Huang
     *@Time 2019/8/15 0015 22:16
     *@function  获取二维码
     *****************************************/
    getEwmImg () {
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpminapperweixinusers/getQrCode?keyword=QY&myaction=qrcode&qrctype=1&uniacid=${this.$store.state.uniacid}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 200) {
          this.$toast('二维码查询失败~')
          return false
        }
        this.ewmImg = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${res.data.ticket}`
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/15 0015 22:16
     *@function  打开二维码关注
     *****************************************/
    openModel (id) {
      this.model_show = true
      // this.$router.push({ path: '/media-detail-no', query: { id: id } })
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/15 0015 22:16
     *@function  获取置顶推荐
     *****************************************/
    getArticleList () {
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpposts/getPostsTopList`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('全部列表查询失败~')
          return false
        }
        this.topArticleList = res.data
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/20 0020 13:10
     *@function  调用分享
     *****************************************/
    openShareModel () {
      this.shareAPPorWx()
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/15 0015 16:46
     *@function  判断分享使用 app分享还是wx接口
     *****************************************/
    shareAPPorWx () {
      if (this.$store.state.device === 'WX') {
        this.addressShow = true
      } else if (this.$store.state.device === 'APP') {
        try {
          // eslint-disable-next-line no-undef
          Phone.inShare(this.shareUrll, this.articleList.post.postTitle, this.articleList.post.postTitle, this.articleList.avatar)
        } catch (e) {}
      }
    },
    wxRegCallback () {
      // 用于微信JS-SDK回调
      this.wxShareTimeline()
      this.wxShareAppMessage()
    },
    wxShareTimeline () {
      // 微信自定义分享到朋友圈
      let option = {
        title: this.articleList.post.postTitle, // 分享标题, 请自行替换
        link: this.shareUrl, // 分享链接，根据自身项目决定是否需要split
        imgUrl: this.articleList.avatar, // 分享图标, 请自行替换，需要绝对路径
        success: () => {
          this.addressShow = false
        },
        error: () => {
          this.$toast('已取消分享')
        }
      }
      // 将配置注入通用方法
      wxapi.ShareTimeline(option)
    },
    wxShareAppMessage () {
      // 微信自定义分享给朋友
      let option = {
        title: this.articleList.post.postTitle, // 分享标题, 请自行替换
        desc: this.articleList.post.postTitle, // 分享描述, 请自行替换
        link: this.shareUrl, // 分享链接，根据自身项目决定是否需要split
        imgUrl: this.articleList.avatar, // 分享图标, 请自行替换，需要绝对路径
        success: () => {
          this.addressShow = false
        },
        error: () => {
          this.$toast('已取消分享')
        }
      }
      // 将配置注入通用方法
      wxapi.ShareAppMessage(option)
    },
    /*
       *@author wf_Huang
       *@Time 2019/8/13 0013 8:42
       *@function  查询文章详情
       *****************************************/
    getArticleIdDetail () {
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpposts/getPost?id=${this.articleId}&openid=${this.$store.state.openid}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('文章详情查询失败~')
          return false
        }
        this.articleList = res.data[0]
        this.commemtData.postId = this.articleList.post.id
        // 拼接分享地址
        this.setUrl()
        // 文章阅读数加一
        this.addNumebr()
      }).catch(() => {})
    },
    /*
       *@author wf_Huang
       *@Time 2019/8/13 0013 9:10
       *@function  查询评论
       *****************************************/
    getCommentList () {
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpcomments/getComments?cuurent=${this.current}&postId=${this.articleId}&size=${this.size}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('文章评论查询失败~')
          return false
        }
        if (res.data.length < this.size) {
          this.footerShow = true
          this.finished = true
        } else {
          this.footerShow = false
          this.current = this.current + 1
        }
        res.data.forEach(item => {
          this.commentList.push(item)
        })
        this.loading = false
      }).catch(() => {})
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/12 0012 18:00
     *@function  上拉刷新 加载
     *****************************************/
    onLoad: debounce(function () {
      this.getCommentList()
    }, 100, { 'leading': true, 'trailing': false }),
    /*
       *@author wf_Huang
       *@Time 2019/8/13 0013 22:57
       *@function  文章阅读数加一
       *****************************************/
    addNumebr () {
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wppostmeta/addPostmeta?postId=${this.articleId}`,
        method: 'post',
        withCredentials: false
      }).then(({ data: res }) => {
      }).catch(() => {})
    },
    /*
       *@author wf_Huang
       *@Time 2019/8/13 0013 10:00
       *@function  评论
       *****************************************/
    setComment () {
      if (this.commemtData.content === '') {
        this.$toast('请输入评论内容~')
        return false
      }
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpcomments/addComment?postId=${this.commemtData.postId}&content=${this.commemtData.content}`,
        method: 'post',
        data: {
          fansDvice: this.$store.state.device, // APP/WX/H5
          fansChannel: this.$store.state.gsign, // 渠道标识(gkzx)
          fansUniacId: this.$store.state.uniacid, // 微信ID(渠道ID)
          fassLogo: this.$store.state.media.logoUrl, // 渠道logo
          fansShareId: this.$store.state.media.shareId, // 分享者ID
          openid: this.$store.state.openid
        },
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('文章评论失败~')
          return false
        }
        this.$toast('评论成功')
        this.commentList.push({
          avatarurl: null,
          comment: this.commemtData.content,
          fansName: '游客',
          listParent: ''
        })
        this.commemtData.content = ''
      }).catch(() => {})
    },
    setUrl () {
      // 分享地址
      this.shareUrl = `${window.SITE_CONFIG['Url']}media-detail-open?device=WX&gsign=${this.$store.state.gsign}&uniacid=${this.$store.state.uniacid}&shareId=${this.$store.state.media.shareId}&articleId=${this.$store.state.media.articleId ? this.$store.state.media.articleId : this.articleList.post.id}&id=${this.articleList.post.id}`
    },
    /* wf_Huang 2019/9/19 0019 图片预览 */
    openImg (event) {
      if (event.target.nodeName === 'IMG') {
        ImagePreview({
          images: this.articleList.images,
          startPosition: 0,
          onClose () {
            // do something
          }
        })
      }
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    this.getUrlData()
    this.articleId = this.$route.query.id || 0
    this.getArticleList()
    this.getArticleIdDetail()
    this.getCommentList()
    this.getEwmImg()
    wxapi.wxRegister(this.wxRegCallback)
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .media_detail {
    .nav_top_list{
      z-index: 99;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32px;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      background-color: #ffffff;
      box-shadow: 0 2px 12px 0 rgba(153, 153, 153, 0.14);
      .logo_left{
        width: 185px;
        height: 58px;
      }
      .left_btn{
        color: #999999;
        font-size: 32px;
        margin-right: 130px;
      }
      span{
        font-size: 32px;
        color: #181818;
        font-weight: bold;
      }
      .btn_right{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        a{
          height: 100%;
          display: flex;
          padding: 0 10px;
          position: relative;
          &:nth-child(1){
            img{
              width: 36px;
              height: 34px;
            }
          }
          &:nth-child(2){
            img{
              width: 34px;
              height: 34px;
            }
          }
          &:nth-child(3){
            img{
              width: 37px;
              height: 34px;
            }
          }
          .active{
            width: 18px;
            height: 18px;
            position: absolute;
            right: 5px;
            top: 1px;
          }
        }
      }
    }
    .text_body_no{
      padding: 50px 32px;
      margin-top: 100px;
      overflow: hidden;
      position: relative;
      background-color: #ffffff;
      h4{
        font-size: 44px;
        color: #222222;
        line-height: 60px;
        margin: 0;
        padding: 30px 0;
        border-bottom: 1px solid #efefef;
      }
      p{
        font-size: 24px;
        color: #999999;
        line-height: 50px;
        display: flex;
        justify-content: space-between;
        margin-top: 0;
        margin-bottom: 50px;
      }
      .Compile_body_format{
        height: 500px;
        overflow: hidden;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
      }
      .compile_active{
        height: auto;
      }
      .body_format_btn{
        background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%, #FFFFFF 34%);
        position: absolute;
        left: 0;
        right: 0;
        height: 150px;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        p{
          font-size: 24px;
          color: #027FFE;
          margin: 0;
        }
        i{
          font-size: 24px;
          color: #027FFE;
        }
      }
    }
    .footer_body_no{
      padding: 0 0 100px;
      .title_text{
        padding: 32px 20px;
        font-size: 34px;
        color: #222222;
        font-weight: bold;
        border-bottom: 1px solid #efefef;
      }
      .xg_serve{
        padding: 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left_text{
          h5{
            font-size: 30px;
            color: #027FFE;
            margin: 0;
          }
          p{
            font-size: 26px;
            color: #999999;
            margin: 10px 0;
          }
        }
        button{
          background: #FFFFFF;
          border: 1px solid #979797;
          border-radius: 4px;
          width: 141px;
          height: 54px;
          font-size: 24px;
          color: #666666;
        }
      }
      .item_news{
        margin: 32px 32px 40px;
        padding-bottom: 20px;
        border-bottom: 1px solid #f2f3f5;
        .top_img{
          display: flex;
          font-size: 26px;
          color: #666666;
          align-items: center;
          margin-bottom: 20px;
          img{
            width: 60px;
            height: 60px;
            border-radius: 70px;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
            margin-right: 20px;
          }
        }
        .comment_body{
          font-size: 28px;
          color: #222222;
          line-height: 40px;
        }
        .answer_body{
          border-left: 4px solid #027FFE;
          padding-left: 15px;
          margin-top: 20px;
          h5{
            font-size: 26px;
            color: #666666;
            margin: 0;
          }
          p{
            font-size: 28px;
            color: #222222;
            line-height: 35px;
            margin: 10px;
          }
        }
      }
    }
    .footer_bottom_body{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      box-shadow: 0 2px 12px 0 rgba(153, 153, 153, 0.14);
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      padding: 18px 32px;
      input{
        background: #F3F3F3;
        border-radius: 32px;
        width: 420px;
        height: 64px;
        font-size: 28px;
        border: 0;
        padding: 0 35px;
        &::placeholder{
          text-align: center;
          font-size: 28px;
          color: #666666;
        }
      }
      .right_body{
        font-size: 24px;
        color: #999999;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .item_span{
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          height: 30px;
          margin-left: 20px;
          img{
            margin-right: 20px;
          }
          &:nth-child(1){
            font-size: 24px;
            img{
              width: 28px;
              height: 28px;
            }
          }
          &:nth-child(2){
            img{
              width: 30px;
              height: 28px;
            }
          }
        }
        .active{
          color: #027FFE;
        }
      }
    }
    .share_btn_list{
      display: flex;
      .share_item{
        text-align: center;
        flex: 1;
        img{
          width: 100px;
          height: 100px;
          border-radius: 100%;
          display: block;
          margin: 50px auto 0;
        }
        p{
          font-size: 24px;
          color: #000000;
          margin: 10px 0;
        }
      }
    }
    .share_btn_out{
      background: #F2F2F2;
      border-radius: 4px;
      width: 686px;
      height: 96px;
      font-size: 32px;
      color: #666666;
      border: 0;
      margin: 40px auto 0;
      display: block;
    }
    .share_model_btn{
      position: fixed;
      right: 30px;
      bottom: 20%;
      img{
        width: 142px;
        height: 147px;
      }
    }
    .subscribe_img_bnt{
      margin: 0 auto;
      display: flex;
      justify-content: center;
      padding: 21px 28px;
      background-color: #ffffff;
      border-top: 15px solid #F6F6F6;
      border-bottom: 15px solid #F6F6F6;
      img{
        width: 695px;
        height: 158px;
      }
    }
    .top_article_list{
    }
    .model_body{
      background: rgba(0,0,0,0.80);
      position: fixed;
      z-index: 99;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .img_bg{
        background: url("../../../assets/img/modules/media/icon_v2_6.png") no-repeat center;
        background-size: 100% 100%;
        width: 580px;
        height: 702px;
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
        text-align: center;
        padding-top: 50px;
        p{
          font-size: 32px;
          color: #222222;
          letter-spacing: 0;
        }
        .ewm_img{
          width: 324px;
          height: 324px;
          padding: 25px;
          background: #FFFFFF;
          border: 1px solid #C8C8C8;
          border-radius: 26px;
          margin: 0 auto 30px;
          img{
            width: 274px;
            height: 274px;
          }
        }
        span{
          font-size: 26px;
          color: #222222;
          display: block;
          margin-top: 10px;
        }
      }
      .out_model{
        position: absolute;
        bottom: -150px;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        margin: 0 auto;
        width: 64px;
        height: 64px;
      }
    }
  }
</style>
